<template>
  <div class="bg global_bg">
    <div class="userinfo_bg bg_white" @click="toMypage">
      <div class="user_image">
        <div class="ba10">
          <img
            :src="'http://localhost:8090/' + userInfos.user_image"
            alt="头像"
          />
        </div>
      </div>
      <div class="user_name">
        <p class="ftw fts20">{{ userInfos.user_name }}</p>
        <p class="fts12">{{ userInfos.user_account }}</p>
      </div>
      <div class="set">
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="mt1">
      <van-cell-group inset>
        <van-cell>
          <van-grid direction="horizontal" :column-num="3" class="cblack">
            <van-grid-item icon="bag-o" text="我发布的" to="/mine/products" />
            <van-grid-item icon="gold-coin-o" text="我买到的" />
            <van-grid-item icon="underway-o" text="已失效" to="/mine/failure" />
          </van-grid>
        </van-cell>
      </van-cell-group>
    </div>
    <div class="set_bg">
      <van-cell-group>
        <van-cell title="个人资料" is-link to="/mine/mineinfo" />
        <van-cell title="地址管理" is-link to="/mine/address" />
        <van-cell title="账号与安全" is-link to="/mine/changepwd" />
        <van-cell title="退出登录" is-link @click="goOut" />
      </van-cell-group>
    </div>
  </div>
</template>
<script>
import {
  Cell,
  CellGroup,
  Grid,
  GridItem,
  Icon,
  showConfirmDialog,
  showSuccessToast,
} from 'vant'
// import api from '@/api/api.js'
import { ref } from 'vue'
import mine from '@/api/mine.js'
import { useRouter } from 'vue-router'
import routerURL from '@/router/routerURL.js'
export default {
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Icon.name]: Icon,
    [showConfirmDialog.name]: showConfirmDialog,
    [showSuccessToast.name]: showSuccessToast,
  },
  setup() {
    const userInfos = ref({})
    const router = useRouter()
    //获取用户信息
    mine.getuserInfoApi().then((res) => {
      userInfos.value = res.data
    })
    //退出登录
    // const goOut = () => {
    //   showConfirmDialog({
    //     title: '是否退出登录？',
    //     message: '退出后将无法使用全部功能！',
    //   })
    //     .then(() => {
    //       api.logoutApi().then((res) => {
    //         if (res.status === 200) {
    //           showSuccessToast(res.msg)
    //         }
    //       })
    //     })
    //     .catch(() => {
    //       // on cancel
    //     })
    // }
    const goOut = () => {
      showConfirmDialog({
        title: '是否退出登录？',
        message: '退出后将无法使用全部功能！',
      })
        .then(() => {
          //   api.logoutApi().then((res) => {
          //     if (res.status === 200) {
          //       showSuccessToast(res.msg)
          //       // 清空用户信息
          //       userInfos.value = {}
          //     }
          //   })
          router.push({ path: routerURL.LOGIN })
        })
        .catch(() => {
          // 取消退出登录操作
        })
    }

    //跳转个人主页
    const toMypage = () => {
      router.push({ path: routerURL.MYPAGE })
    }
    return {
      goOut,
      userInfos,
      toMypage,
    }
  },
}
</script>
<style scoped>
.userinfo_bg {
  display: flex;
  height: 5.3rem;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.user_image {
  flex: 2;
  padding: 6px 15px;
}
.ba10 {
  width: 4.5rem;
  height: 4.5rem;
  border: 1px solid #eceeea;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
}
.user_image img {
  width: 100%;
  height: 100%;
}
.user_name {
  flex: 7;
  padding: 19px 2px;
}
.set {
  flex: 1;
  padding: 30px 2px;
  font-size: 20px;
}
.set_bg {
  margin-top: 5px;
}
</style>
